import React, { useEffect, useState } from "react";
import { enquireScreen } from "enquire-js";

import { Breadcrumb, Layout, Menu, theme } from "antd";
import { MenusConfig } from "./NavsConfig";
import { Outlet, useRoutes } from "react-router-dom";
import routerConfig from "./routerConfig";

import "./index.less";
import Navs from "./common/Navs";
import { FooterDataSource, NavsDataSource } from "./dataSource";
import "@/less/antMotionStyle.less";
import Footer from "./common/Footer";
import { Content } from "antd/es/layout/layout";

const { location = {} } = typeof window !== "undefined" ? window : {};

const AppWrapper = () => {
  const [show, setShow] = useState(false);
  const elements = useRoutes(routerConfig);
  console.log(elements);
  useEffect(() => {
    if ((location as any)?.port) {
      // 样式 build 时间在 200-300ms 之间;
      setTimeout(() => {
        setShow(true);
      }, 500);
    }
  }, []);

  return (
    <div className="templates-wrapper">
      {show && (
        <>
          <Navs dataSource={NavsDataSource} />
          <Content>
            <Outlet></Outlet>
          </Content>
          <Footer id="footer-wrap" dataSource={FooterDataSource} />
        </>
      )}
    </div>
  );
};

export default AppWrapper;
